<template>
  <van-image fit="cover" :src="imgUrl" v-show="url">
    <template v-slot:loading>
      <van-loading type="spinner" size="20" />
    </template>
    <template v-slot:error>
      <van-loading type="spinner" size="20" />
    </template>
  </van-image>
</template>

<script>
export default {
  name: "AnImage",
  props: {
    url: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      baseUrl: import.meta.env.VITE_APP_BASE_IMG,
      imgUrl: "",
    };
  },
  watch: {
    url: {
      handler(newVal, oldVal) {
        if (
          newVal &&
          newVal.indexOf("http") == -1 &&
          newVal.indexOf("/") != 0
        ) {
          this.imgUrl = this.baseUrl + newVal;
        } else {
          this.imgUrl = newVal;
        }
      },
      immediate: true,
    },
  },
  mounted() {},
};
</script>